<template>
  <header>
    <div class="header-top min-width">
      <div class="container fn-clear">
        <strong class="fn-left">
          咨询热线：400-000-0000
          <span class="s-time">服务时间：9:00 - 18:00</span>
        </strong>
        <ul class="header_contact">
          <li class="c_1">
            <a class="ico_head_weixin" id="wx"></a>
          </li>
          <li class="c_2">
            <a href="#" target="_blank" title="官方QQ" alt="官方QQ">
              <b class="ico_head_QQ"></b>
            </a>
          </li>
          <li class="c_4">
            <a href="#" target="_blank" title="新浪微博" alt="新浪微博">
              <b class="ico_head_sina"></b>
            </a>
          </li>
        </ul>

        <!-- 用户未登录 -->
        <ul v-if="!userInfo" class="fn-right header-top-ul">
          <!-- <li><a href="" :class="'c-orange'">测试</a></li> -->
          <li>
            <NuxtLink to="/" :class="{ 'c-orange': $route.fullPath === '/' }"
              >返回首页</NuxtLink
            >
          </li>
          <li>
            <div class="">
              <NuxtLink
                to="/register"
                :class="{ 'c-orange': $route.fullPath === '/register' }"
              >
                免费注册
              </NuxtLink>
            </div>
          </li>
          <li>
            <div class="">
              <NuxtLink
                to="/login"
                :class="{ 'c-orange': $route.fullPath === '/login' }"
              >
                登录
              </NuxtLink>
            </div>
          </li>
        </ul>

        <!-- 用户已登录 -->
        <ul v-if="userInfo" class="fn-right header-top-ul">
          <li><NuxtLink to="/" class="app">返回首页</NuxtLink></li>
          <li>
            <div class="">
              <NuxtLink to="/user" class="user" title="我的账户">
                <i
                  ><img
                    :src="userInfo.headImg"
                    style="width: 20px;height: 20px;"
                    alt=""
                /></i>
                <i>{{ userInfo.nickName }}</i>
              </NuxtLink>
            </div>
          </li>
          <li>
            <div class="">
              <a
                href="javascript:void(0)"
                class="js-login"
                @click="logout()"
                title="退出"
              >
                退出
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="header min-width">
      <div class="container">
        <div class="fn-left logo">
          <NuxtLink to="/">
            <img src="~/assets/images/logo.png" title="" />
          </NuxtLink>
        </div>
        <ul class="top-nav fn-clear">
          <li :class="{ on: $route.fullPath === '/' }">
            <NuxtLink to="/">首页</NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/list' }">
            <NuxtLink to="/lend"> 我要投资 </NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/help' }">
            <NuxtLink to="/help">安全保障</NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/about' }">
            <NuxtLink to="/about">关于我们</NuxtLink>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>
<script>
import "~/assets/font/iconfont.css";
import cookie from "js-cookie";

export default {
  data() {
    return {
      userInfo: null,
    };
  },

  mounted() {
    this.showInfo();
  },

  methods: {
    //显示用户信息
    showInfo() {
      //先查询用户信息缓存如果存在回显
      let userInfoStr = localStorage.getItem("userInfo");
      if (userInfoStr) {
        this.userInfo = JSON.parse(userInfoStr);
        console.log("userInfo缓存回显");
        return;
      }
      //如果不存在查询本地缓存的token，如果存在根据token获取用户信息回显

      //获取本地缓存的token
      let token = localStorage.getItem("SRB-TOKEN");
      if (token) {
        //访问后端查询用户信息接口: 协议 服务器ip:应用端口号 资源路径
        this.$axios({
          url: "/api/core/userInfo/details",
          method: "GET",
          headers: { token }, //axios传参时  data  params  headers的值必须传json对象
        }).then((r) => {
          console.log("token缓存查询回显");
          //r代表响应报文
          this.userInfo = r.data.data.item;
          //缓存查询到的用户信息: 对象不能直接存储，需要转为json字符串
          localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
        });
        //回显
        //如果用户信息+token都不存在：不查询不回显代表没有登录
      }
    },

    //退出
    logout() {
      //清空缓存 刷新页面
      localStorage.removeItem("SRB-TOKEN");
      localStorage.removeItem("userInfo");
      window.location = "/";
    },
  },
};
</script>
